<template>
  <bsCard v-loading='loading' class="target-wrapper" :width="getBsLRWPercent(630)" height="200px">
    <div class="bs-card-title">规上企业指标</div>
    <div class="target-content">
      <div class="per-box" v-for="per of list" :key="per.indexCode">
        <div class="title">{{ per.indexName }}</div>
        <div class="val-content">
          <span>{{ per.itemValue }}</span>
          <!-- <span>
            同比{{ per.itemValueZf }}
            <i>{{  per.itemValueZf.charAt(0) === '-' ? '↓' : '↑' }}</i>
          </span> -->
        </div>
      </div>
    </div>
  </bsCard>
</template>

<script>
import bsCard from './bsCard.vue'
import { getRegulationsOnCorporateIndicators } from '@/api/bigscreen'
// import { moneyFormat } from './tools'
export default {
  name: 'target',
  components: {
    bsCard
  },
  inject: ['getBsLRWPercent'],
  data() {
    return {
      loading: false,
      //
      list: [
        {
          indexName: '工业增加值',
          itemValue: '4%',
          indexCode: 1
        },
        {
          indexName: '工业企业个数',
          itemValue: '84个',
          indexCode: 2
        },
        {
          indexName: '工业总产值',
          itemValue: '559.43亿',
          indexCode: 3
        },
        {
          indexName: '营业收入',
          itemValue: '660.21亿',
          indexCode: 4
        },
        {
          indexName: '利税总额',
          itemValue: '79.35亿',
          indexCode: 5
        },
        {
          indexName: '利润总额',
          itemValue: '61.87亿',
          indexCode: 6
        }
      ]
    }
  },
  created() {
    // this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await getRegulationsOnCorporateIndicators()
        if (res.resultCode === 200) {
          //
          this.list = res.resultData
          // this.list = res.resultData.map((per)=>{
          //   return {

          //   }
          // })
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    }
  }
}
</script>

<style lang='scss'>
@import '../styles/_variables.scss';
.target-wrapper {
  .bs-card-title {
    margin-left: 20px;
  }
  .bs-card-content {
    padding-left: 0;
    padding-right: 0;
  }
  .target-content {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    padding: 0 10px;
    margin-top: 5px;
  }
  .per-box {
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: calc((100% - 10px) / 3);
    height: 68px;
    flex: 0 0 auto;
    background-color: rgba(19, 126, 214, 0.2);
    // padding-left: 45px;
    padding-left: 60px;
    font-size: 18px;

    background-image: url('../assets/income.png');
    background-size: 35px 35px;
    // background-position: 5px center;
    background-position: 10px center;
    background-repeat: no-repeat;

    & .title {
      color: $FontBlue;
    }
  }
  .per-box:nth-child(n + 4) {
    margin-top: 5px;
  }
  .val-content {
    span {
      display: inline-block;
    }
    i {
      display: inline-block;
      transform: translateY(-2px);
    }
  }
}
</style>

